<template>
  <div class="flex flex-col">
    <!-- 系统概况 -->
    <el-card shadow="never">
      <template #header>
        <CardTitle title="系统概况" />
      </template>
      <el-row :gutter="16">
        <el-col :md="4" :sm="12" :xs="24">
          <SummaryCard
            title="楼栋数"
            tooltip="接入惠留厦系统总楼栋数量"
            icon="fa-solid:city"
            icon-color="bg-blue-100"
            icon-bg-color="text-blue-500"
            :decimals="0"
            :value="summary.houseCount || 0"
          />
        </el-col>
        <el-col :md="4" :sm="12" :xs="24">
          <SummaryCard
            title="房间数"
            tooltip="接入惠留厦系统总房间数量"
            icon="fa-solid:door-open"
            icon-color="bg-blue-100"
            icon-bg-color="text-blue-500"
            :decimals="0"
            :value="summary.roomCount || 0"
          />
        </el-col>
        <el-col :md="4" :sm="12" :xs="24">
          <SummaryCard
            title="银联账户数"
            tooltip="已开通银联收款账户数"
            icon="fa-solid:closed-captioning"
            icon-color="bg-blue-100"
            icon-bg-color="text-gray-500"
            :decimals="0"
            :value="summary?.ownConfigSummaryVo?.allOwnMeterConfigCount || 0"
          />
        </el-col>
        <el-col :md="4" :sm="12" :xs="24">
          <SummaryCard
            title="平台用户数"
            tooltip="平台总用户数量"
            icon="fa-solid:address-card"
            icon-color="bg-blue-100"
            icon-bg-color="text-gray-500"
            :decimals="0"
            :value="summary?.allMemberCount || 0"
          />
        </el-col>
        <el-col :md="4" :sm="12" :xs="24">
          <SummaryCard
            title="集中器/采集器数"
            tooltip="集中器/采集器数"
            icon="fa-solid:barcode"
            icon-color="bg-blue-100"
            icon-bg-color="text-green-500"
            :decimals="0"
            :value="summary?.meterSummaryVo?.meterSerialServerCount || 0"
          />
        </el-col>
        <el-col :md="4" :sm="12" :xs="24">
          <SummaryCard
            title="电表数"
            tooltip="计入电表数量"
            icon="fa-solid:calculator"
            icon-color="bg-blue-100"
            icon-bg-color="text-green-500"
            :decimals="0"
            :value="summary?.meterSummaryVo?.meterCount || 0"
          />
        </el-col>
        <el-col :md="4" :sm="12" :xs="24">
          <SummaryCard
            title="宽带系统接入数"
            tooltip="宽带系统接入数"
            icon="fa-solid:broadcast-tower"
            icon-color="bg-blue-100"
            icon-bg-color="text-green-500"
            :decimals="0"
            :value="summary?.lfApiSysCount || 0"
          />
        </el-col>
        <el-col :md="4" :sm="12" :xs="24">
          <SummaryCard
            title="宽带账号零售数"
            tooltip="宽带账号零售数"
            icon="fa-solid:chalkboard-teacher"
            icon-color="bg-blue-100"
            icon-bg-color="text-blue-500"
            :decimals="0"
            :value="summary?.netSummaryVo?.netAccountCount || 0"
          />
        </el-col>
        <el-col :md="4" :sm="12" :xs="24">
          <SummaryCard
            title="宽带账号批发数"
            tooltip="宽带账号批发数"
            icon="fa-solid:chalkboard-teacher"
            icon-color="bg-blue-100"
            icon-bg-color="text-blue-500"
            :decimals="0"
            :value="summary?.netGroupSummaryVo?.netAccountCount || 0"
          />
        </el-col>
      </el-row>
    </el-card>
    <!-- 订单数据 -->
    <el-card shadow="never">
      <template #header>
        <CardTitle title="订单数据" />
      </template>
      <el-row :gutter="16">
        <el-col :md="6" :sm="12" :xs="24">
          <SummaryCard
            title="累计订单金额"
            tooltip="累计订单金额"
            icon="fa-solid:dollar-sign"
            icon-color="bg-blue-100"
            icon-bg-color="text-blue-500"
            prefix="￥"
            :decimals="2"
            :value="fenToYuan(summary?.allPayedMoney || 0)"
          />
        </el-col>
        <el-col :md="6" :sm="12" :xs="24">
          <SummaryCard
            title="累计退款金额"
            tooltip="累计退款金额"
            icon="fa-solid:dollar-sign"
            icon-color="bg-blue-100"
            icon-bg-color="text-blue-500"
            prefix="￥"
            :decimals="2"
            :value="fenToYuan(summary?.allRefundedMoney || 0)"
          />
        </el-col>
        <el-col :md="6" :sm="12" :xs="24">
          <SummaryCard
            title="平台收入"
            tooltip="平台收入"
            icon="fa-solid:dollar-sign"
            icon-color="bg-blue-100"
            icon-bg-color="text-blue-500"
            prefix="￥"
            :decimals="2"
            :value="fenToYuan(summary?.allPlatformFeeMoney || 0)"
          />
        </el-col>
        <el-col :md="6" :sm="12" :xs="24">
          <SummaryCard
            title="总订单"
            tooltip="总订单"
            icon="fa-solid:cart-arrow-down"
            icon-color="bg-blue-100"
            icon-bg-color="text-blue-500"
            :decimals="0"
            :value="summary?.allPayedCount || 0"
          />
        </el-col>
        <el-col :md="6" :sm="12" :xs="24">
          <SummaryCard
            title="已支付订单"
            tooltip="已支付订单"
            icon="fa-solid:cart-arrow-down"
            icon-color="bg-blue-100"
            icon-bg-color="text-blue-500"
            :decimals="0"
            :value="summary?.okPayedCount || 0"
          />
        </el-col>
      </el-row>
    </el-card>
    <!-- 电表充值 -->
    <el-card shadow="never">
      <template #header>
        <CardTitle title="电表充值" />
      </template>
      <el-row :gutter="16" class="row">
        <el-col :md="12" :sm="12" :xs="24" :loading="loading">
          <MeterComparisonCard
            tag="今日-电表"
            title="支付额"
            prefix="￥"
            :decimals="2"
            :value="fenToYuan(summary?.meterSummaryVo?.payedMoneyOfToday || 0)"
            :reference="fenToYuan(summary?.meterSummaryVo?.payedMoneyOfYesToday || 0)"
          />
        </el-col>
        <el-col :md="12" :sm="12" :xs="24" :loading="loading">
          <MeterComparisonCard
            tag="今日-电表"
            title="支付订单数量"
            :value="summary?.meterSummaryVo?.payedCountOfToday || 0"
            :reference="summary?.meterSummaryVo?.payedCountOfYesToday || 0"
          />
        </el-col>
      </el-row>
      <el-row :gutter="16" class="row">
        <el-col :md="6" :sm="12" :xs="24">
          <SummaryCard
            title="累计订单金额"
            tooltip="累计订单金额"
            icon="fa-solid:dollar-sign"
            icon-color="bg-blue-100"
            icon-bg-color="text-green-500"
            prefix="￥"
            :decimals="2"
            :value="fenToYuan(summary?.meterSummaryVo.allPayedMoney || 0)"
          />
        </el-col>
        <el-col :md="6" :sm="12" :xs="24">
          <SummaryCard
            title="累计退款金额"
            tooltip="累计退款金额"
            icon="fa-solid:dollar-sign"
            icon-color="bg-blue-100"
            icon-bg-color="text-green-500"
            prefix="￥"
            :decimals="2"
            :value="fenToYuan(summary?.meterSummaryVo.allRefundedMoney || 0)"
          />
        </el-col>
        <el-col :md="6" :sm="12" :xs="24">
          <SummaryCard
            title="平台收入"
            tooltip="平台收入"
            icon="fa-solid:dollar-sign"
            icon-color="bg-blue-100"
            icon-bg-color="text-green-500"
            prefix="￥"
            :decimals="2"
            :value="fenToYuan(summary?.meterSummaryVo.allPlatformFeeMoney || 0)"
          />
        </el-col>
        <el-col :md="6" :sm="12" :xs="24">
          <SummaryCard
            title="总订单"
            tooltip="总订单"
            icon="fa-solid:cart-arrow-down"
            icon-color="bg-blue-100"
            icon-bg-color="text-green-500"
            :decimals="0"
            :value="summary?.meterSummaryVo.allPayedCount || 0"
          />
        </el-col>
        <el-col :md="6" :sm="12" :xs="24">
          <SummaryCard
            title="已支付订单"
            tooltip="已支付订单"
            icon="fa-solid:cart-arrow-down"
            icon-color="bg-blue-100"
            icon-bg-color="text-green-500"
            :decimals="0"
            :value="summary?.meterSummaryVo.okPayedCount || 0"
          />
        </el-col>
        <el-col :md="6" :sm="12" :xs="24">
          <SummaryCard
            title="待支付订单"
            tooltip="待支付订单"
            icon="fa-solid:cart-arrow-down"
            icon-color="bg-blue-100"
            icon-bg-color="text-green-500"
            :decimals="0"
            :value="summary?.meterSummaryVo.waitPayCount || 0"
          />
        </el-col>
        <el-col :md="6" :sm="12" :xs="24">
          <SummaryCard
            title="逾期未支付订单"
            tooltip="逾期未支付订单"
            icon="fa-solid:cart-arrow-down"
            icon-color="bg-blue-100"
            icon-bg-color="text-green-500"
            :decimals="0"
            :value="summary?.meterSummaryVo.expirePayCount || 0"
          />
        </el-col>
      </el-row>
    </el-card>
    <!-- 宽带（零售）充值 -->
    <el-card shadow="never">
      <template #header>
        <CardTitle title="宽带（零售）充值" />
      </template>
      <el-row :gutter="16" class="row">
        <el-col :md="12" :sm="12" :xs="24" :loading="loading">
          <MeterComparisonCard
            tag="今日-宽带"
            title="支付额"
            prefix="￥"
            :decimals="2"
            :value="fenToYuan(summary?.netSummaryVo?.payedMoneyOfToday || 0)"
            :reference="fenToYuan(summary?.netSummaryVo?.payedMoneyOfYesToday || 0)"
          />
        </el-col>
        <el-col :md="12" :sm="12" :xs="24" :loading="loading">
          <MeterComparisonCard
            tag="今日-宽带"
            title="支付订单数量"
            :value="summary?.netSummaryVo?.payedCountOfToday || 0"
            :reference="summary?.netSummaryVo?.payedCountOfYesToday || 0"
          />
        </el-col>
      </el-row>
      <el-row :gutter="16" class="row">
        <el-col :md="6" :sm="12" :xs="24">
          <SummaryCard
            title="累计订单金额"
            tooltip="累计订单金额"
            icon="fa-solid:dollar-sign"
            icon-color="bg-blue-100"
            icon-bg-color="text-blue-500"
            prefix="￥"
            :decimals="2"
            :value="fenToYuan(summary?.netSummaryVo.allPayedMoney || 0)"
          />
        </el-col>
        <el-col :md="6" :sm="12" :xs="24">
          <SummaryCard
            title="平台收入"
            tooltip="平台收入"
            icon="fa-solid:dollar-sign"
            icon-color="bg-blue-100"
            icon-bg-color="text-blue-500"
            prefix="￥"
            :decimals="2"
            :value="fenToYuan(summary?.netSummaryVo.allPlatformFeeMoney || 0)"
          />
        </el-col>
        <el-col :md="6" :sm="12" :xs="24">
          <SummaryCard
            title="总订单"
            tooltip="总订单"
            icon="fa-solid:cart-arrow-down"
            icon-color="bg-blue-100"
            icon-bg-color="text-blue-500"
            :decimals="0"
            :value="summary?.netSummaryVo.allPayedCount || 0"
          />
        </el-col>
        <el-col :md="6" :sm="12" :xs="24">
          <SummaryCard
            title="已支付订单"
            tooltip="已支付订单"
            icon="fa-solid:cart-arrow-down"
            icon-color="bg-blue-100"
            icon-bg-color="text-blue-500"
            :decimals="0"
            :value="summary?.netSummaryVo.okPayedCount || 0"
          />
        </el-col>
        <el-col :md="6" :sm="12" :xs="24">
          <SummaryCard
            title="待支付订单"
            tooltip="待支付订单"
            icon="fa-solid:cart-arrow-down"
            icon-color="bg-blue-100"
            icon-bg-color="text-blue-500"
            :decimals="0"
            :value="summary?.netSummaryVo.waitPayCount || 0"
          />
        </el-col>
        <el-col :md="6" :sm="12" :xs="24">
          <SummaryCard
            title="逾期未支付订单"
            tooltip="逾期未支付订单"
            icon="fa-solid:cart-arrow-down"
            icon-color="bg-blue-100"
            icon-bg-color="text-blue-500"
            :decimals="0"
            :value="summary?.netSummaryVo.expirePayCount || 0"
          />
        </el-col>
      </el-row>
    </el-card>
    <!-- 宽带（批发）充值 -->
    <el-card shadow="never">
      <template #header>
        <CardTitle title="宽带（批发）充值" />
      </template>
      <el-row :gutter="16" class="row">
        <el-col :md="12" :sm="12" :xs="24" :loading="loading">
          <MeterComparisonCard
            tag="今日-宽带"
            title="支付额"
            prefix="￥"
            :decimals="2"
            :value="fenToYuan(summary?.netGroupSummaryVo?.payedMoneyOfToday || 0)"
            :reference="fenToYuan(summary?.netGroupSummaryVo?.payedMoneyOfYesToday || 0)"
          />
        </el-col>
        <el-col :md="12" :sm="12" :xs="24" :loading="loading">
          <MeterComparisonCard
            tag="今日-宽带"
            title="支付订单数量"
            :value="summary?.netGroupSummaryVo?.payedCountOfToday || 0"
            :reference="summary?.netGroupSummaryVo?.payedCountOfYesToday || 0"
          />
        </el-col>
      </el-row>
      <el-row :gutter="16" class="row">
        <el-col :md="6" :sm="12" :xs="24">
          <SummaryCard
            title="累计订单金额"
            tooltip="累计订单金额"
            icon="fa-solid:dollar-sign"
            icon-color="bg-blue-100"
            icon-bg-color="text-green-500"
            prefix="￥"
            :decimals="2"
            :value="fenToYuan(summary?.netGroupSummaryVo.allPayedMoney || 0)"
          />
        </el-col>
        <el-col :md="6" :sm="12" :xs="24">
          <SummaryCard
            title="平台收入"
            tooltip="平台收入"
            icon="fa-solid:dollar-sign"
            icon-color="bg-blue-100"
            icon-bg-color="text-green-500"
            prefix="￥"
            :decimals="2"
            :value="fenToYuan(summary?.netGroupSummaryVo.allPlatformFeeMoney || 0)"
          />
        </el-col>
        <el-col :md="6" :sm="12" :xs="24">
          <SummaryCard
            title="总订单"
            tooltip="总订单"
            icon="fa-solid:cart-arrow-down"
            icon-color="bg-blue-100"
            icon-bg-color="text-green-500"
            :decimals="0"
            :value="summary?.netGroupSummaryVo.allPayedCount || 0"
          />
        </el-col>
        <el-col :md="6" :sm="12" :xs="24">
          <SummaryCard
            title="已支付订单"
            tooltip="已支付订单"
            icon="fa-solid:cart-arrow-down"
            icon-color="bg-blue-100"
            icon-bg-color="text-green-500"
            :decimals="0"
            :value="summary?.netGroupSummaryVo.okPayedCount || 0"
          />
        </el-col>
        <el-col :md="6" :sm="12" :xs="24">
          <SummaryCard
            title="待支付订单"
            tooltip="待支付订单"
            icon="fa-solid:cart-arrow-down"
            icon-color="bg-blue-100"
            icon-bg-color="text-green-500"
            :decimals="0"
            :value="summary?.netGroupSummaryVo.waitPayCount || 0"
          />
        </el-col>
        <el-col :md="6" :sm="12" :xs="24">
          <SummaryCard
            title="逾期未支付订单"
            tooltip="逾期未支付订单"
            icon="fa-solid:cart-arrow-down"
            icon-color="bg-blue-100"
            icon-bg-color="text-green-500"
            :decimals="0"
            :value="summary?.netGroupSummaryVo.expirePayCount || 0"
          />
        </el-col>
      </el-row>
    </el-card>
    <!-- 快捷入口 -->
    <MeterShortcutCard />
  </div>
</template>
<script lang="ts" setup>
import SummaryCard from '@/components/SummaryCard/index.vue'
import MeterComparisonCard from './meter/components/MeterComparisonCard.vue'
import MeterShortcutCard from './meter/components/MeterShortcutCard.vue'
import { CardTitle } from '@/components/Card'
import * as IndexApi from '@/api/zwsj/index'
import { fenToYuan } from '@/utils'

defineOptions({ name: 'Home' })
const loading = ref(true) // 加载中
const summary = ref({
  allPayedCount: 0,
  okPayedCount: 0,
  allPlatformFeeMoney: 0,
  allPayedMoney: 0,
  allRefundedMoney: 0,
  houseCount: 0,
  roomCount: 0,
  emptyRoomCount: 0,
  lfApiSysCount: 0,
  allMemberCount: 0,
  sendedHuaxingSmsCount: 0,
  ownConfigSummaryVo: {
    allOwnMeterConfigCount: 0,
    ownMeterConfigCountOfToday: 0,
    ownMeterConfigCountOfYesToday: 0
  },
  netSummaryVo: {
    netAccountCount: 0
  },
  netGroupSummaryVo: {
    netAccountCount: 0
  },
  meterSummaryVo: {
    payedMoneyOfToday: 0,
    payedCountOfToday: 0,
    payedMoneyOfYesToday: 0,
    payedCountOfYesToday: 0,
    allPayedMoney: 0,
    allRefundedMoney: 0,
    allPlatformFeeMoney: 0,
    meterSerialServerCount: 0,
    meterCount: 0,
    allPayedCount: 0,
    okPayedCount: 0,
    waitPayCount: 0,
    expirePayCount: 0
  }
})

const getSummarys = async () => {
  loading.value = false
  const data = await IndexApi.getSummarys()
  summary.value = data
}
getSummarys()
</script>

<style lang="scss">
.dashboard-editor-container {
  position: relative;
  padding: 32px;
  background-color: rgb(240 242 245);
}

.panel-group {
  margin-top: 9px;

  .card-panel-col {
    margin-bottom: 16px;
  }

  .card-panel {
    position: relative;
    height: 108px;
    overflow: hidden;
    font-size: 12px;
    color: #666;
    cursor: pointer;
    background: #fff;
    border-color: rgb(0 0 0 / 5%);
    box-shadow: 4px 4px 40px rgb(0 0 0 / 5%);

    &:hover {
      .card-panel-icon-wrapper {
        color: #fff;
      }

      .icon-people {
        background: #40c9c6;
      }

      .icon-message {
        background: #36a3f7;
      }

      .icon-money {
        background: #f4516c;
      }

      .icon-shopping {
        background: #34bfa3;
      }
    }

    .icon-people {
      color: #40c9c6;
    }

    .icon-message {
      color: #36a3f7;
    }

    .icon-money {
      color: #f4516c;
    }

    .icon-shopping {
      color: #34bfa3;
    }

    .card-panel-icon-wrapper {
      float: left;
      padding: 16px;
      margin: 14px 0 0 14px;
      border-radius: 6px;
      transition: all 0.38s ease-out;
    }

    .card-panel-icon {
      float: left;
      font-size: 48px;
    }

    .card-panel-description {
      float: right;
      margin: 26px 26px 26px 0;
      font-weight: bold;

      .card-panel-text {
        margin-bottom: 12px;
        font-size: 16px;
        line-height: 18px;
        color: rgb(0 0 0 / 45%);
      }

      .card-panel-num {
        font-size: 20px;
      }
    }
  }
}

@media (width <= 550px) {
  .card-panel-description {
    display: none;
  }

  .card-panel-icon-wrapper {
    float: none !important;
    width: 100%;
    height: 100%;
    margin: 0 !important;

    .svg-icon {
      display: block;
      float: none !important;
      margin: 14px auto !important;
    }
  }
}
</style>
